/*
 * @Author: Wxx
 * @Date: 2022-02-21 14:47:32
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-21 14:55:47
 * @Description:
 */
import React, { Component } from "react";

export default class APP extends Component {
  state = {
    name: "小米",
  };

  // 最新react中已弃用
  componentWillMount() {
    //第一次 will mount 可以拿到状态数据 调用方法 但是获取不到真实dom
    console.log("componentWillMount", this.state.name);
    this.setState({
      name: "华为",
    });
    console.log(document.getElementById("mydom")); // 打印出来是null 此时海获取不到真实dom
  }

  componentDidMount() {
    // 可以在didmount中进行接口请求 开启定时器 发布订阅 给予渲染完dom后的初始化
    // 页面第一次渲染完毕 先走willmount 再走rendered 在走componentDidMount
    console.log("componentDidMount");
    console.log(document.getElementById("mydom")); //打印结果： <span id="mydom">华为</span>
  }
  render() {
    console.log("render");
    return (
      <div>
        您好，
        <span id="mydom">{this.state.name}</span>
      </div>
    );
  }
}
